<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-form :inline="true" class="demo-form-inline" :model="cxlist">
                    <el-form-item>
                        <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model="cxlist.staid" placeholder="起始id"
                            style="width: 60px;" @keydown.enter.native="usercx" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="cxlist.endid" placeholder="结束id" oninput="value=value.replace(/[^0-9.]/g,'')"
                            style="width: 60px;" @keydown.enter.native="usercx" />
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="cxlist.name" clearable filterable placeholder="作品名称" class="product-input"
                            @blur="productSelect" allow-create>
                            <el-option v-for="(item, index) in arr" :key="index" :label="item.cname"
                                :value="item.name" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="cxlist.state" placeholder="作品状态">
                            <el-option label="售卖中" value="0" />
                            <el-option label="收藏中" value="2" />
                            <el-option label="寄卖中" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" round @click="usercx">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" round @click="onSubmit">重置</el-button>
                    </el-form-item>

                </el-form>

            </el-header>
            <el-main>

                <el-table :data="list" style="width: 100%; text-align: start;" empty-text="暂无数据"
                    :header-cell-style="{ background: '#EFF0FD', color: '#606266' }" id="table">
                    <el-table-column fixed prop="id" label="ID" show-overflow-tooltip />
                    <el-table-column prop="cname" label="作品信息"  show-overflow-tooltip />
                    <el-table-column prop="cid" label="作品编号"  show-overflow-tooltip/>
                    <el-table-column prop="username" label="当前归属"  show-overflow-tooltip />
                    <el-table-column prop="cstate" label="作品状态"  show-overflow-tooltip />
                </el-table>
                <div class="demo-pagination-block">

                    <el-pagination v-model:current-page="cxlist.currentPage" v-model:page-size="cxlist.pageSize"
                        :page-sizes="[2, 3, 4, 5]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="cxlist.count"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>

            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'TokensList',

    data() {
        return {
            cxlist: { staid: '', endid: '', name: '', state: '', currentPage: 1, pageSize: 2, count: 0 },
            list: [],
            arr:[],
        };
    },

    mounted() {
        this.usercx();
        var url='http://localhost:8083/CollectionServlet/queryAllCname'
        this.$http.post(url)
        .then((res)=>{
            this.arr=res.data;
        })
    },

    methods: {
        handleSizeChange() {
            this.usercx();
        },
        handleCurrentChange() {
            this.usercx();
        },
        productSelect(e) {
            let value = e.target.value; // 输入框值
            if (value) { // 你输入才有这个值 不为空，如果你下拉框选择的话 这个值为空
                this.cxlist.name = value
            }
        },
        onSubmit() {
            this.cxlist.name = '';
            this.cxlist.endid = '';
            this.cxlist.staid = '';
            this.cxlist.state = '';
            this.cx();
        },
        cx() {
            var url = 'http://localhost:8083/CollectionServlet/queryAllIdCo';
            this.$http.post(url)
                .then((response) => {
                    this.list = response.data;
                    for (var i = 0; i < this.list.length; i++) {
                        console.log(111);
                        if (this.list[i].cstate == 2) {
                            this.list[i].cstate ='收藏中';
                            console.log(1);
                        }
                        else if (this.list[i].cstate == 1) {
                            this.list[i].cstate = '寄卖中';
                            console.log(2);
                        }
                        else if(this.list[i].cstate == 0){
                            this.list[i].cstate ='售卖中';
                            console.log(3);
                        }
                    }
                    // console.log(response.data);
                })
        },
        usercx() {
            
            var url = 'http://localhost:8083/CollectionServlet/queryByIdCondition';
            this.$http.post(url, this.cxlist)
                .then((res) => {
                    this.list = res.data.records;
                    this.cxlist.count = res.data.count;
                    this.cxlist.pageSize = res.data.pageSize;
                    for (var i = 0; i < this.list.length; i++) {
                        if (this.list[i].cstate == 2) {
                            this.list[i].cstate = '收藏中'
                        }
                        else if (this.list[i].cstate == 1) {
                            this.list[i].cstate = '寄卖中'
                        }
                        else if(this.list[i].cstate == 0){
                            this.list[i].cstate ='售卖中';
                           
                        }
                    }
                })
        },
    },
};
</script>

<style lang="scss" scoped>

</style>